spa.modal = (function($){
    var
        configMap = {
            main_html : String() +
                '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">'+
                    '<div class="modal-dialog">'+
                        '<div class="modal-content">'+
                            '<div class="modal-header">'+
                                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;'+
                                '</button>'+
                                '<h5 class="modal-title">'+
                                    '标题'+
                                '</h5>'+
                            '</div>'+
                            '<div class="modal-body">'+
                                '<form class="form-horizontal" role="form">'+
                                '</form>'+
                            '</div>'+
                            '<div class="modal-footer">'+
                                '<button type="button" class="btn btn-default" data-dismiss="modal">关闭'+
                                '</button>'+
                                '<button type="button" class="btn btn-primary">'+
                                    '提交'+
                                '</button>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                '</div>'
        },
        stateMap = {

        },
        jqueryMap = {

        },initModule,setJqueryMap,show,hide,setFields,setTitle,setCallback

    setJqueryMap = function(){
        var $container = stateMap.$container,
            $modal = $(configMap.main_html),
            $title  = $modal.find(".modal-title"),
            $form = $modal.find("form.form-horizontal"),
            $button_ok = $modal.find('button.btn-primary')
        $container.append($modal)
        jqueryMap = {
            $container : $container,
            $modal : $modal,
            $title : $title,
            $form : $form,
            $button_ok : $button_ok
        }
        $button_ok.click(function(event){
            if(stateMap.callback){
                stateMap.callback(jqueryMap.$modal)
            }
        })
    }

    setTitle = function(title){
        jqueryMap.$title.text(title)
    }

    show = function(){
        jqueryMap.$modal.modal()
    }

    hide = function(){
        jqueryMap.$modal.modal('hide')
    }

    initModule = function($container){
        stateMap.$container = $container
        setJqueryMap()
    }

    setFields = function(fields){
        jqueryMap.$form.html("")
        var index;
        for(index in fields){
            fields[index].setParent(jqueryMap.$form)
        }
    }

    setCallback = function(callback){
        stateMap.callback = callback
    }

    return {
        initModule : initModule,
        show : show,
        hide : hide,
        setTitle : setTitle,
        setFields : setFields,
        setCallback : setCallback
    }
}(jQuery))